﻿<template>
	<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<el-card shadow="hover" class="layout-padding-auto create-form">
			<el-form ref="formRef" :model="stateData.vmModel" label-width="120px">
				<el-row :gutter="20">
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item
							ref="Entity_UserId_FormItem"
							prop="Entity.UserId"
							label="用户"
							:rules="[{ required: true, message: '用户为必填项', trigger: 'blur' }]"
						>
							<el-select v-model="stateData.vmModel.Entity.UserId" disabled clearable class="width100">
								<el-option v-for="item in stateData.AllFrameworkUsers" :key="item.Value" :value="item.Value" :label="item.Text"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item
							ref="Entity_GroupId_FormItem"
							prop="Entity.GroupId"
							label="部门"
							:rules="[{ required: true, message: '部门为必填项', trigger: 'blur' }]"
						>
							<el-cascader
								:options="stateData.AllFrameworkGroups"
								:props="{ checkStrictly: true, emitPath: false, label: 'Text', value: 'Value', children: 'Children' }"
								clearable
								filterable
								class="w100"
								v-model="stateData.vmModel.Entity.GroupId"
								disabled
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item
							ref="Entity_JobPositionId_FormItem"
							prop="Entity.JobPositionId"
							label="岗位"
							:rules="[{ required: true, message: '岗位为必填项', trigger: 'blur' }]"
						>
							<el-select v-model="stateData.vmModel.Entity.JobPositionId" disabled clearable class="width100" placeholder="请先选择部门">
								<el-option v-for="item in stateData.AllSysJobPositions" :key="item.Value" :value="item.Value" :label="item.Text" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :lg="12" class="mb20">
						<el-form-item
							ref="Entity_IsMain_FormItem"
							prop="Entity.IsMain"
							label="是否主岗"
							:rules="[{ required: true, message: '是否主岗为必填项', trigger: 'blur' }]"
						>
							<el-select v-model="stateData.vmModel.Entity.IsMain" disabled clearable class="width100">
								<el-option :key="1" :value="true" :label="$t('message._system.common.vm.tips_bool_true')"></el-option>
								<el-option :key="0" :value="false" :label="$t('message._system.common.vm.tips_bool_false')"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="message._system.common.vm.details;false">
import { reactive, ref, getCurrentInstance, onMounted, watch, nextTick } from 'vue';
import { SysUserJobPositionApi as api } from '/@/views/_admin/sysuserjobposition/api';
import other from '/@/utils/other';
import { useRouter } from 'vue-router';
import { ISysUserJobPositionVm } from '/@/views/_admin/sysuserjobposition/api/interface';
import { IViewModel } from '/@/types/common';

const ci = getCurrentInstance() as any;
const loading = ref(false);
const formRef = ref();
const stateData = reactive<IViewModel<ISysUserJobPositionVm>>({
	vmModel: {
		Entity: {
			ID: null,
			UserId: null,
			JobPositionId: null,
			IsMain: false,
			GroupId: null,
		},
	},
	AllFrameworkUsers: [] as any[],
	AllSysJobPositions: [] as any[],
	AllFrameworkGroups: [] as any[],
});

// 获取岗位数据的方法
const getSysJobPositions = (groupId?: string) => {
	const url = groupId ? `/api/SysUserJobPosition/GetSysJobPositions?groupId=${groupId}` : '/api/SysUserJobPosition/GetSysJobPositions';
	return other.getSelectList(url, [], false).then((x) => {
		stateData.AllSysJobPositions = x;
	});
};

// 监听部门选择变化（虽然禁用，但保证数据联动一致）
watch(
	() => stateData.vmModel.Entity.GroupId,
	(newGroupId) => {
		if (newGroupId) {
			stateData.vmModel.Entity.JobPositionId = null;
			getSysJobPositions(newGroupId);
		} else {
			stateData.AllSysJobPositions = [];
			stateData.vmModel.Entity.JobPositionId = null;
		}
	}
);

// 取消
const onClose = () => {
	closeDialog();
};

// 页面加载时
onMounted(() => {
	loading.value = true;
	if (ci.attrs['wtmdata']) {
		stateData.vmModel.Entity.ID = ci.attrs['wtmdata'].ID;
	} else if (useRouter().currentRoute.value.query.id) {
		stateData.vmModel.Entity.ID = useRouter().currentRoute.value.query.id as any;
	}
	Promise.all([
		other.getSelectList('/api/SysUserJobPosition/GetFrameworkUsers', [], false).then((x) => {
			stateData.AllFrameworkUsers = x;
		}),
		other.getSelectList('/api/common/GetGroups?auth=false', [], false).then((x) => {
			stateData.AllFrameworkGroups = x;
		}),
	]).then(() => {
		api()
			.get(stateData.vmModel.Entity.ID ?? '')
			.then((data: any) => {
				other.setValue(stateData.vmModel, data);
				// 用JobPosition下的GroupId覆盖
				if (data.Entity && data.Entity.JobPosition && data.Entity.JobPosition.GroupId) {
					stateData.vmModel.Entity.GroupId = data.Entity.JobPosition.GroupId;
				}
				// 先暂存岗位ID
				const tempJobPositionId = data.Entity.JobPositionId;
				// 如果有部门，加载岗位
				if (stateData.vmModel.Entity.GroupId) {
					return getSysJobPositions(stateData.vmModel.Entity.GroupId).then(() => {
						stateData.vmModel.Entity.JobPositionId = tempJobPositionId;
					});
				}
				return Promise.resolve();
			})
			.finally(() => {
				loading.value = false;
				nextTick(() => {
					setupHeaderButtons();
				});
			});
	});
});

const emit = defineEmits(['refresh', 'closeDialog', 'updateHeaderButtons']);
const closeDialog = () => {
	emit('closeDialog');
};

// 设置对话框头部按钮
const setupHeaderButtons = () => {
	const headerButtons = [
		{
			text: ci.proxy.$t('message._system.common.vm.cancel'),
			type: 'default',
			onClick: onClose,
			visible: true,
		},
	];
	emit('updateHeaderButtons', headerButtons);
};
</script>
